/**
* 资源包
*/
<template>
    <el-form v-loading="loading" :model="formData" :rules="isEditPage ? formRules : {}" ref="formRef" label-width="80px"
        :scroll-to-error="true">
        <vp-card>
            <template #header>
                <vp-label zh="基础信息" en="Basic Information" />
            </template>
            <el-row style="flex: 1;">
                <vp-col :span="2">
                    <el-form-item prop="bh">
                        <template #label><vp-label zh="编号" en="" align="left" /></template>
                        <el-input v-model="formData.bh" v-trim maxlength="20" v-if="isEditPage" />
                        <span v-else>{{ formData.bh }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="mc">
                        <template #label><vp-label zh="名称" en="" align="left" /></template>
                        <el-input v-model="formData.mc" maxlength="100" v-if="isEditPage" />
                        <span v-else>{{ formData.mc }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="bz">
                        <template #label><vp-label zh="备注" en="" /></template>
                        <el-input type="textarea" v-model="formData.bz" maxlength="1000" :autosize="{ minRows: 2 }"
                            v-if="isEditPage">
                        </el-input>
                        <vp-text v-else>{{ formData.bz }}</vp-text>
                    </el-form-item>
                </vp-col>
            </el-row>
        </vp-card>

        <vp-card>
            <template #header>
                <vp-label zh="明细" en="" />
            </template>
            <vp-vxe-table :data="formData.detailList" row-key="id" minHeight="300">
                <vxe-column type="seq" align="center" title="#" width="50" />
                <vxe-column field="jh">
                    <template #header><vp-label zh="件号/产品名" en="" /></template>
                </vxe-column>
                <vxe-column field="wllx" show-overflow width="200">
                    <template #header><vp-label zh="物料类型" en="" /></template>
                    <template #default="scope">
                        <vp-label v-if="scope.row.wllx == 10" zh="航材" en="Aircraft Material" />
                        <vp-label v-else-if="scope.row.wllx == 20" zh="化工品" en="Chemical" />
                        <vp-label v-else-if="scope.row.wllx == 30" zh="工具" en="Tool" />
                    </template>
                </vxe-column>
                <vxe-column field="zwms" show-overflow>
                    <template #header><vp-label zh="名称" en="Name" /></template>
                    <template #default="{ row }">
                        <div style="display: flex;gap: 1px;">
                            <el-tag>中:{{ row.zwms }}</el-tag>
                            <el-tag>英:{{ row.ywms }}</el-tag>
                        </div>
                    </template>
                </vxe-column>
                <vxe-column field="tdjjh">
                    <template #header><vp-label zh="替代件号" en="" /></template>
                </vxe-column>
                <vxe-column field="gg">
                    <template #header><vp-label zh="规格" en="" /></template>
                </vxe-column>
                <vxe-column field="bh">
                    <template #header><vp-label zh="需求数" en="" /></template>
                    <template #default="scope">
                        <el-form-item :prop="`detailList[${scope.rowIndex}].xqsl`" :rules="formRules.xqsl"
                            label-width="auto">
                            <el-input-number v-model="scope.row.xqsl" :min="1" v-if="isEditPage" />
                            <span v-else>{{ scope.row.xqsl }}</span>
                        </el-form-item>
                    </template>
                </vxe-column>
                <vxe-column field="" v-if="type == 'view'">
                    <template #header><vp-label zh="朝阳库存" en="" /></template>
                </vxe-column>
                <vxe-column field="" v-if="type == 'view'">
                    <template #header><vp-label zh="扎兰库存" en="" /></template>
                </vxe-column>
                <vxe-column field="" v-if="type == 'view'">
                    <template #header><vp-label zh="乌兰库存" en="" /></template>
                </vxe-column>
                <vxe-column field="" v-if="type == 'view'">
                    <template #header><vp-label zh="在途数" en="" /></template>
                </vxe-column>
                <vxe-column align="center" width="100" v-if="isEditPage">
                    <template #header>
                        <el-button circle @click="handleAddDetail()">
                            <SvgIcon name="ele-Plus"></SvgIcon>
                        </el-button>
                    </template>
                    <template #default="scope">
                        <el-button circle @click="handleDeleteDetail(scope.rowIndex)">
                            <SvgIcon name="ele-Minus"></SvgIcon>
                        </el-button>
                    </template>
                </vxe-column>
            </vp-vxe-table>
        </vp-card>
        <VpBasedataMaterialDialog ref="vpBasedataMaterialDialog"></VpBasedataMaterialDialog>
    </el-form>
</template>
<script setup lang="ts" name="Ata">
import { onMounted, ref, computed } from "vue";
import request from "/@/utils/request";
import validateUtils from "/@/utils/validateUtils";

const emits = defineEmits(['formSubmited']);

import VpBasedataMaterialDialog from '/@/components/vp/basedataMaterial/VpBasedataMaterialDialog.vue'

const formData = ref({
    id: "",
    bh: "",
    mc: "",
    bz: "",
    detailList: [] as any[],
});
const formRules = {
    bh: [validateUtils.notNull],
    mc: [validateUtils.notNull],
    sxbs: [validateUtils.notNull],

    xqsl: [validateUtils.notNull, validateUtils.numValidator],
}

const initFormData = () => {
    formData.value = {
        id: "",
        bh: "",
        mc: "",
        bz: "",
        detailList: [] as any[],
    }
}

const type = ref('add');
const loading = ref(false);
const formRef = ref();

const props = defineProps<{
    id: string,
    type: string,
}>()

onMounted(() => {
    handleOpen(props.type, props.id);
})

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
});

const handleOpen = (_type: string, id: string) => {
    type.value = _type;
    initFormData();
    if (type.value != "add") {
        loading.value = true;
        request.get(`/material/resoursePackage/${id}`).then((res) => {
            formData.value = {
                ...formData.value,
                ...res.data,
            };
            loading.value = false;
            emits("formSubmited", formData.value);
        });
    }
}

const getData = (zt: number): Promise<any> => {
    let promise = new Promise((resolve, reject) => {
        formRef.value.validate((valid: boolean) => {
            if (valid) {
                resolve({
                    ...formData.value,
                });
            } else {
                reject();
            }
        })
    })
    return promise;
};


const vpBasedataMaterialDialog = ref();


const handleDeleteDetail = (index: number) => {
    formData.value.detailList.splice(index, 1);
};

const handleAddDetail = () => {
    vpBasedataMaterialDialog.value.handleOpen({
        multi: true,
        callback: (obj: any) => {
            obj.forEach((item: any, index: number) => {
                const exists = formData.value.detailList.some((detailItem: any) => detailItem.wlid === item.id);
                if (!exists) {
                    const data = {
                        wlid: item.id,
                        wllx: item.wllx,
                        jh: item.jh,
                        zwms: item.zwms,
                        ywms: item.ywms,
                        tdjjh: item.tdjjh,
                        gg: item.gg,
                        xqsl: 1,
                    }
                    formData.value.detailList.push(data);
                }
            });
        }
    })
}

defineExpose({
    getData
})

</script>
<style scoped>
:deep(.row-warning1) {
    color: var(--el-color-danger);
}
</style>